<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看游记</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <link href="css/public.css" rel="stylesheet">
    <link href="css/travelogueView.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/public.js"></script>
</head>
<body>
    <div id="app">
        <public @user-loaded="handleUserLoaded" ref="loginComponent">
            <template v-slot:header-ul>
                <ul class="header-ul">
                    <li style="width: 60px;">首页</li>
                    <li style="width: 74px;">目的地</li>
                    <li style="width: 88px;">旅游攻略</li>
                    <li style="width: 70px;">去旅行</li>
                    <li style="width: 54px;background-color: #ff9d00;color: white">社区</li>
                    <li style="width: 74px">找搭子</li>
                </ul>
            </template>
            <template v-slot:nologin>
                <div class="header-login">
                    <a href="javascript:void(0)"><img src="images/qq.png" title="QQ登录"/></a>
                    <a href="javascript:void(0)"><img src="images/wx.png" title="微信登录"/></a>
                    <a class="lar" href="lar.html" style="font-weight: bold;">登录</a>
                    <span>|</span>
                    <a class="lar" href="lar.html" style="font-weight: bold;">注册</a>
                </div>
            </template>
            <template v-slot:logined="user">
                <div class="header-login">
                    <a>打卡</a>
                    <a class="msg">消息<i class="bi bi-caret-down-fill"></i></a>
                    <a class="per"><img :src="user.avatar"><i class="bi bi-caret-down-fill"></i></a>
                </div>
                <!--消息下拉菜单-->
                <div class="tips msg-tips">
                    <ul>
                        <li>私信</li>
                        <li>系统通知</li>
                        <li>回复消息</li>
                    </ul>
                </div>
                <!--用户下拉菜单-->
                <div class="tips user-tips">
                    <ul>
                        <li><i class="bi bi-pencil-square"></i>写游记</li>
                        <li><i class="bi bi-question-diamond"></i>我的问答</li>
                        <li><i class="bi bi-star-fill"></i>我的收藏</li>
                        <li><i class="bi bi-gear"></i>设置</li>
                        <li @click="loginout"><i class="bi bi-box-arrow-left"></i>退出</li>
                    </ul>
                </div>
            </template>
            <template v-slot:container>
                <div class="container-img">
                    <img :src="travelogue.backImg">
                    <div class="container-relevant">
                        <h2>{{travelogue.title}}</h2>
                        <div>
                            <a><i class="bi bi-hand-thumbs-up-fill"></i></a>
                            <span>965</span>
                        </div>
                    </div>
                </div>
                <div class="container-introduce">
                    <div class="introduce-left">
                        <div><img :src="travelogue.avatar"></div>
                        <div class="introduce-left-people">
                            <ul>
                                <li>{{travelogue.username}}</li>
                                <li><a @click="follow">{{isFollow}}</a></li>
                                <li><span>{{travelogue.createdTime}}</span></li>
                                <li style="display: flex;justify-content: center"><i class="bi bi-eye-fill"></i><span>&nbsp;{{viewCount}}/{{comments.length}}</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="introduce-right">
                        <a class="introduce-right-first"><i class="bi bi-star"></i>111收藏</a>
                        <a class="introduce-right-second"><i class="bi bi-share"></i>222分享</a>
                    </div>
                </div>
                <div class="container-view">
                    <div class="view-con">
                        <div class="view-con-tags">
                            <ul>
                                <li>出发时间<span>/</span>2023-09-29</li>
                                <li>出行天数<span>/</span>6天</li>
                                <li>人物<span>/</span>夫妻/情侣</li>
                                <li>人均费用<span>/</span>250Rmb</li>
                            </ul>
                        </div>
                        <div class="view-con-content">
                            <div v-for="(item,index) in sortedContent" :key="index" :id="'section-' + index">
                                <div v-if="item.type === 'paragraph' " class="content-para">
                                    <h2>
                                        <span>{{item.value}}</span>
                                    </h2>
                                    <div></div>
                                </div>
                                <div v-if="item.type === 'text' " class="content-text">
                                    <p>{{item.value}}</p>
                                </div>
                                <div v-if="item.type === 'image' " class="content-img">
                                    <img :src="item.value"/>
                                </div>
                            </div>
                            <div class="content-tail">
                                本篇游记共计包含了<span>{{getTotalTextLength}}</span>个文字，<span>{{content.images.length}}</span>张图片。
                            </div>
                            <div>
                                <div class="content-comments">
                                    <div v-for="(item,index) in comments" :key="index" style="margin-bottom: 30px">
                                        <div class="comment-info">
                                            <div class="comment-info-avatar">
                                                <a><img :src="item.avatar"></a>
                                            </div>
                                            <div class="comment-info-user">
                                                <a class="comment-info-user-name">{{item.username}}</a>
                                            </div>
                                            <div class="comment-info-floor">
                                                <span>{{index+1}}F</span>
                                            </div>
                                        </div>
                                        <div class="comment-wrap">
                                            <div class="comment-wrap-word">
                                                <p>{{item.content}}</p>
                                            </div>
                                        </div>
                                        <div class="comment-bot">
                                            <div class="comment-bot-time">{{item.commentTime}}</div>
<!--                                            <div class="comment-bot-option"><a>回复</a></div>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="user.id" class="content-reply">
                                <div class="content-reply-tab">
                                    <a>回复游记</a>
                                </div>
                                <div class="content-reply-remark">
                                    <div class="content-reply-remark-avatar">
                                        <a><img :src="user.avatar"></a>
                                    </div>
                                    <div class="content-reply-remark-text">
                                        <dl>
                                            <dt>
                                                <div>
                                                    <a style="display: none" class="emotion"><i class="bi bi-emoji-smile"></i>添加表情</a>
                                                    <input type="file" style="display: none">
                                                </div>
                                            </dt>
                                            <dd>
                                                <div class="reply-text">
                                                    <textarea v-model="myComment" id="say" cols="30" rows="10" placeholder="回复...">

                                                    </textarea>
                                                </div>
                                            </dd>
                                        </dl>
                                        <div class="content-reply-remark-submit">
                                            <a @click="leaveComment" title="发表回复">发表回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="view-side" id="viewSide">
                        <div class="notes_catalog">
                            <div class="notes_catalog-title">游记目录</div>
                            <div class="pagelet-block">
                                <div style="position: relative; height: 300px;">
                                    <div style="position: relative; overflow-y: auto; max-height: 300px;">
                                        <ul class="catalog_content">
                                            <li v-for="(item,index) in content.paragraphs">
                                                <span class="catalog_num">{{formatIndex(index+1)}}/</span>
                                                <a :href="'#section-' + index">{{item.value}}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </public>

    </div>

<script>
    const token = localStorage.getItem('token');
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    var v = new Vue({
        el : "#app",
        data : {
            user: {},
            travelogue: {},
            content: {
                images: [],
                paragraphs: [],
                texts:[]
            },
            sortedContents: [],
            isFollow: '关注',
            comments:[],
            myComment: '',
            viewCount: 0,
        },
        created() {
            // 获取 URL 的查询部分
            const queryString = window.location.search;
            // 解析查询部分
            const params = new URLSearchParams(queryString);
            // 获取 travelogueId 参数的值
            const tid = params.get("travelogueId");
            if (tid != null && tid != 0){
                axios.get("/travelogues/getOne?travelogueId="+tid).then(res =>{
                    if (res.data.code == 200){
                        this.travelogue = res.data.data;
                        axios.get("/contents/getAll?travelogueId="+tid).then(res =>{
                            if (res.data.code == 200){
                                let list = res.data.data;
                                list.forEach( item => {
                                    if (item.contentType == 'image'){
                                        this.content.images.push({
                                            id: item.contentId,
                                            type: item.contentType,
                                            value: item.contentValue,
                                            index: item.contentIndex,
                                        })
                                    }else if(item.contentType == 'text'){
                                        this.content.texts.push({
                                            id: item.contentId,
                                            type: item.contentType,
                                            value: item.contentValue,
                                            index: item.contentIndex
                                        });
                                    }else{
                                        this.content.paragraphs.push({
                                            id: item.contentId,
                                            type: item.contentType,
                                            value: item.contentValue,
                                            index: item.contentIndex
                                        })
                                    }
                                })

                                this.content.paragraphs = this.content.paragraphs.sort((a, b) => a.index - b.index);

                                axios.get("/users/getByTid?id=" + this.travelogue.userId).then(res => {
                                    const userData = res.data.data;
                                    Object.keys(userData).forEach(key => {
                                        Vue.set(this.travelogue, key, userData[key]);
                                    });
                                })
                                this.$nextTick(() => {
                                    this.initializeScrollHandler();
                                });
                            };
                        })
                        this.getComments();
                    }
                })
                axios.get("/travelogues/action/view?travelogueId="+tid).then(res =>{
                    axios.get("/travelogues/action/views?travelogueId="+tid).then(res =>{
                        this.viewCount = res.data;
                    });
                })
            }
        },
        mounted(){
            this.checkFollowStatus();

        },
        updated(){

        },
        computed: {
            sortedContent() {
                // 合并三个部分并按index排序
                this.sortedContents = [...this.content.images, ...this.content.paragraphs,...this.content.texts]
                    .sort((a, b) => a.index - b.index);
                return this.sortedContents;
            },
            getTotalTextLength() {
                let length = 0;
                this.content.texts.forEach(item => {
                    length += item.value.length;
                });
                return length;
            }

        },
        methods : {
            getComments(){
                axios.get("/comments?travelogueId="+this.travelogue.travelogueId).then(res =>{
                    const c = res.data.comments;
                    const u = res.data.users;
                    for (let i = 0; i < c.length; i++) {
                        Object.keys(u[i].data).forEach(key => {
                            Vue.set(c[i], key, u[i].data[key]);
                        });
                    }
                    this.comments = c;
                })
            },
            handleUserLoaded(user) {
                if (user == null){
                    return
                }
                this.user = user;
            },
            formatIndex(index) {
                return String(index).padStart(2, '0');
            },
            follow(){
                if (this.user == null || JSON.stringify(this.user) == "{}"){
                    this.$alert("用户未登录，请先登录")
                    return
                }
                if (this.isFollow === '关注'){
                    axios.post("/follows",{
                        fanId:this.user.id,
                        followedId:this.travelogue.userId
                    }).then(res => {
                        this.isFollow = '已关注';
                    })
                }else{
                    axios.put("/follows",{
                        fanId:this.user.id,
                        followedId:this.travelogue.userId
                    }).then(res => {
                        this.isFollow = '关注';
                    })
                }
            },
            loginout(){
                axios.get("/users/loginout").then(res =>{
                    this.$refs.loginComponent.user = null;
                    this.user = {};
                })
            },
            leaveComment(){
                axios.post("/comments",{
                    content: this.myComment,
                    commenterId: this.user.id,
                    travelogueId: this.travelogue.travelogueId
                }).then(res =>{
                    if (res.data.code == 200){
                        this.comments.push(res.data.data);
                        this.getComments();
                        this.myComment = "";
                        this.$message({
                            type:'success',
                            message: "评论成功！"
                        })
                    }
                })
            },
            checkFollowStatus() {
                if (this.user && this.user.id && this.travelogue && this.travelogue.userId) {
                    axios.get("/follows/isFollow?fanId=" + this.user.id + "&followedId=" + this.travelogue.userId)
                        .then(res => {
                            this.isFollow = res.data.data ? '已关注' : '关注';
                        });
                }
            },
            initializeScrollHandler() {
                this.$nextTick(() => {
                    const viewSide = document.getElementById('viewSide');
                    const containerView = document.querySelector('.container-view');
                    const containerOffsetTop = containerView.offsetTop;
                    const containerHeight = containerView.offsetHeight;
                    const viewSideHeight = viewSide.offsetHeight;
                    const initialLeft = viewSide.offsetLeft + 220; // 获取初始 left 值
                    const offsetTop = 40; // 离顶部的距离

                    window.addEventListener('scroll', function() {
                        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

                        if (scrollTop > containerOffsetTop - offsetTop && scrollTop < containerOffsetTop + containerHeight - viewSideHeight - offsetTop) {
                            viewSide.style.position = 'fixed';
                            viewSide.style.top = offsetTop + 'px';
                            viewSide.style.left = initialLeft + 'px'; // 固定时设置 left 值
                        } else if (scrollTop >= containerOffsetTop + containerHeight - viewSideHeight - offsetTop) {
                            viewSide.style.position = 'absolute';
                            viewSide.style.top = (containerHeight - viewSideHeight) + 'px';
                            viewSide.style.left = ''; // 清除 left 值
                        } else {
                            viewSide.style.position = 'absolute';
                            viewSide.style.top = '0px';
                            viewSide.style.left = ''; // 清除 left 值
                        }
                    });
                });
            }
        },
        watch: {
            travelogue(newValue, oldValue) {
                if (newValue && newValue.userId) {
                    this.$nextTick(() => {
                        this.checkFollowStatus();
                    });
                }
            }
        }
    })


    // document.addEventListener('DOMContentLoaded', function() {
    //     const viewSide = document.getElementById('viewSide');
    //     const containerView = document.querySelector('.container-view');
    //     const containerOffsetTop = containerView.offsetTop;
    //     const containerHeight = containerView.offsetHeight;
    //     const viewSideHeight = viewSide.offsetHeight;
    //     const initialLeft = viewSide.offsetLeft + 220; // 获取初始 left 值
    //     const offsetTop = 40; // 离顶部的距离
    //
    //     window.addEventListener('scroll', function() {
    //         const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    //
    //         if (scrollTop > containerOffsetTop - offsetTop && scrollTop <
    //             containerOffsetTop + containerHeight - viewSideHeight - offsetTop) {
    //             viewSide.style.position = 'fixed';
    //             viewSide.style.top = offsetTop + 'px';
    //             viewSide.style.left = initialLeft + 'px'; // 固定时设置 left 值
    //         } else if (scrollTop >= containerOffsetTop + containerHeight - viewSideHeight - offsetTop) {
    //             viewSide.style.position = 'absolute';
    //             viewSide.style.top = (containerHeight - viewSideHeight) + 'px';
    //             viewSide.style.left = ''; // 清除 left 值
    //         } else {
    //             viewSide.style.position = 'absolute';
    //             viewSide.style.top = '0px';
    //             viewSide.style.left = ''; // 清除 left 值
    //         }
    //     });
    // });




</script>

</body>
</html>